<template>
	<view class="recommend-shop-wrap">
		<loading-vue :loading="loading" text="正在加载..." />
		<u-transition :show="!loading">
			<!-- <view class="recommend-xl-wrap-inner border" >			</view> -->
				<view v-if="!isEmpty" class="recommend-line-wrap-inner-wrap">
					<view class="water-full-col ">
						<view class="line-item" v-for="(item) in listLeft" :key="item.id" @click="toDetail(item.id)">
							<view class="line-image">
								<image :src="item.image" class="w-100" mode="widthFix"></image>
							</view>
							<view class="line-desc">
								<view class="lien-remark">
									<text>{{ item.desc }}</text>
								</view>
								<!-- <view class="user-wrap">
									<image :src="item.avatar" class="user-avatar"></image>
									<text class="usernaem">{{ item.nickname }}</text>
								</view> -->
							</view>
						</view>
					</view>
					<view class="water-full-col ">
						<view class="line-item" v-for="(item) in listRight" :key="item.id" @click="toDetail(item.id)">
							<view class="line-image">
								<image :src="item.image" class="w-100" mode="widthFix"></image>
							</view>
							<view class="line-desc">
								<view class="lien-remark">
									<text>{{ item.desc }}</text>
								</view>
								<!-- <view class="user-wrap">
									<image :src="item.avatar" class="user-avatar"></image>
									<text class="usernaem">{{ item.nickname }}</text>
								</view> -->
							</view>
						</view>
					</view>
				</view>
			<view class="empty-wrapper" v-else>
				<u-empty text="暂无数据" :icon="sourceUrl+'/data-empty.png'" />
			</view>
			<view class="loadmore-wrapper">
				<u-loadmore icon-color="#3c9cff" :status="status" loading-icon="semicircle" />
			</view>
		</u-transition>
	</view>
</template>

<script>
	import LoadingVue from './loading.vue'
	import { LOAD_MORE } from '@/constant/index.js'
	export default {
		components: { LoadingVue },
		props: ['cityId', 'areaId'],
		created() {
			this.initData()
		},
		methods: {
			toDetail(id) {
				let url = '/pages-bundle/article-detail/index?id=' + id
				uni.navigateTo({ url })
			},
			async initData(clear = false) {
				if (clear) {
					this.status = LOAD_MORE.LOADING
					this.page = 1
					this.list = []
					this.isEmpty = false
				}
				if (this.status === LOAD_MORE.NO_MORE) return
				this.status = LOAD_MORE.LOADING
				const { page, pageSize, cityId, areaId } = this
				const resp = await this.$request({
					url: "/article/lists",
					method:"GET",
					data: { page, list_rows: pageSize, city_id: cityId, cid: 12 },
				})
				console.log('initShopData', resp);
				await this.$delay(300)
				this.loading = false
				const { code, data, msg } = resp
				if (code !== 1) {
					this.status = LOAD_MORE.NO_MORE
					this.isEmpty = true
					return this.$toast({ title: msg })
				}
				const { current_page, per_page, total, lists: list } = data
				if (!!list && list.length) {
					this.list.push(...list)
				}
				this.isEmpty = this.list.length === 0
				const hasMore = current_page * per_page < total
				if (hasMore) {
					this.page += 1
					return this.status = LOAD_MORE.LOAD_MORE
				}
				this.status = LOAD_MORE.NO_MORE
			},
		},
		computed: {
			listLeft(){
				const result= []
				this.list.forEach((item,index)=>{
					if(index % 2 === 0){
						result.push(item)
					}
				})
				return result
			},
			listRight(){
				const result= []
				this.list.forEach((item,index)=>{
					if(index % 2 !== 0){
						result.push(item)
					}
				})
				return result
			}
		},
		data() {
			return {
				page: 1,
				pageSize: 15,
				list: [],
				isEmpty: false,
				status: LOAD_MORE.LOAD_MORE,
				loading: true,
			}
		}
	}
</script>

<style lang="scss" scoped>
	.recommend-shop-wrap {
		.recommend-line-wrap-inner-wrap {
			position: relative;
			border-radius: 16rpx;
			padding: 28rpx 16rpx;
			box-sizing: border-box;
			display: flex;
			flex-flow: row nowrap;
			gap: 0 30rpx;
		}
		.water-full-col {
			width: 100%;
		
			.line-item {
				position: relative;
				width: 100%;
				height: fit-content;
				border-radius: 16rpx;
				overflow: hidden;
				margin-bottom: 32rpx;
		
				&:last-child {
					margin-bottom: 0;
				}
		
				.line-desc {
					padding: 16rpx;
					background-color: #ffffff;
		
					.user-wrap {
						margin-top: 8rpx;
						display: flex;
						align-items: center;
		
						.user-avatar {
							width: 32rpx;
							height: 32rpx;
							border-radius: 50%;
						}
		
						.usernaem {
							height: 32rpx;
							font-size: 20rpx;
							color: rgba(0, 0, 0, 0.6);
							margin-left: 8rpx;
							line-height: 32rpx;
						}
					}
		
					.lien-remark {
						font-size: 24rpx;
						color: rgba(0, 0, 0, 0.9);
						font-weight: bold;
						word-break: break-all;
						line-height: 40rpx;
					}
				}
		
				.line-image {
					width: 100%;
					font-size: 0;
				}
			}
		}
		.recommend-xl-wrap-inner {
			padding: 32rpx 28rpx;
			box-sizing: border-box;
			position: relative;
			background-color: #ffffff;
			border-radius: 16rpx;
			display: grid;
			grid-template-columns: repeat(2, 1fr);
			gap: 32rpx 30rpx;
		}

		.xl-item {
			width: 100%;
			height: 400rpx;
			border-radius: 16rpx;
			overflow: hidden;
			position: relative;

			.xl-footer {
				height: 72rpx;
				background: rgba(0, 0, 0, 0.7);
				border-radius: 0rpx 0rpx 16rpx 16rpx;
				width: 100%;
				position: absolute;
				left: 0;
				right: 0;
				bottom: 0;
				display: flex;
				align-items: center;
				justify-content: center;

				.xl-name {
					height: 40rpx;
					font-size: 24rpx;
					color: #FFFFFF;
					line-height: 40rpx;
				}
			}

			.xl-image {
				width: 100%;
				height: 100%;
			}
		}
	}
</style>